<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <!--无数据提示 开始-->
    <section th:if="${#lists.isEmpty(courseOpenList)}" class="no-data__wrap">
        <span class="no-data-ico"></span>
        <p class="mt20"><span class="c-666">还没有推荐免费直播数据~~~</span></p>
    </section>
    <!--无数据提示 结束-->
    <div th:if="!${#lists.isEmpty(courseOpenList)}" data-wrap="false" data-interval="false" id="carousel2" class="carousel slide">
        <div class="container">
            <div class="carousel-inner mt20 i-live-course-list-inner__wrap">
                <section class="i-live-cour-timer-line"></section>
                <div class="item active" th:if="${#lists.size(courseOpenList)>0}">
                    <div class="course-list__wrap i-live-course__wrap">
                        <div class="row">
                            <div class="col-md-4 col-lg-3" th:each="courseOpen, index: ${courseOpenList}" th:if="${index.index>=0 && index.index<=3}">
                                <div class="thumbnail pr">
                                    <section th:if="${courseOpen['playStatus']==1}" class="i-live-c-timer__wrap text-center">
                                        <div class="hLh30 pr">
                                            <span class="i-live-badge label label-primary"><em>直播中</em></span>
                                            <span class="fs20 c-primary" th:text="${#strings.substring(courseOpen['openTime'],10,16)} + ' — ' + ${#strings.substring(courseOpen['endTime'],10,16)}"></span>
                                        </div>
                                        <div>
                                            <span class="c-999" th:text="${#strings.substring(courseOpen['openTime'],5,7)} + '月' + ${#strings.substring(courseOpen['endTime'],7,10)} + '日'"></span>
                                        </div>
                                        <h6><span class="fs16 c-primary"><i class="fa fa-circle"></i></span></h6>
                                    </section>
                                    <section th:if="${courseOpen['playStatus']!=1}" class="i-live-c-timer__wrap text-center">
                                        <div class="hLh30"><span class="fs20 c-666" th:text="${#strings.substring(courseOpen['openTime'],10,16)} + ' — ' + ${#strings.substring(courseOpen['endTime'],10,16)}"></span></div>
                                        <div th:text="${#strings.substring(courseOpen['openTime'],5,7)} + '月' + ${#strings.substring(courseOpen['endTime'],7,10)} + '日'"></div>
                                        <h6><span class="fs16 c-ccc"><i class="fa fa-circle"></i></span></h6>
                                    </section>
                                    <section class="pr" th:attr="data-open=${courseOpen['id']},data-status=${courseOpen['playStatus']}">
                                        <aside th:if="${courseOpen['playStatus']==1}" class="cm-kc-num"><span class="fs12 c-warning"><i class="fa fa-circle"></i> 直播中</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==2} and !${courseOpen['reservation']}" class="cm-kc-num"><span class="fs12 c-primary"><i class="fa fa-circle"></i> 可预约</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==2} and ${courseOpen['reservation']}" class="cm-kc-num"><span class="fs12 c-primary"><i class="fa fa-circle"></i> 已预约</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==3 && courseOpen['replay']!=2}" class="cm-kc-num"><span class="fs12 c-fff"><i class="fa fa-circle"></i> 已结束</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==3 && courseOpen['replay']==2}" class="cm-kc-num"><span class="fs12 c-info"><i class="fa fa-circle"></i> 有回放</span></aside>
                                        <a href="javascript:void(0)"><img class="lazy" width="100%" th:attr="data-original=${courseOpen['imageMap']['pcUrlMap']['large']}"></a>
                                    </section>
                                    <div class="caption bg-fb">
                                        <section class="cm-desc-txt__twoLine">
                                            <a href="javascript:void(0)" class="fs16 c-333" th:text="${courseOpen['courseName']}"></a>
                                        </section>
                                        <section class="mt10 mb5 clearfix">
                                            <aside class="pull-right">
                                                <span class="ml5 fs12 c-999">学习：
                                                    <span th:text="${courseOpen['bespeakNum']}"></span>
                                                </span>
                                            </aside>
                                            <aside class="pull-left hLh20 txtOf i-c-small-teacher__wrap" th:if="${courseOpen['teacher']}!=null">
                                                <a th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${courseOpen['teacher']['id']})}"  data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${courseOpen['teacher']['teacherName']}"  class="mr5">
                                                    <img class="img-circle lazy-user" th:attr="data-original=${courseOpen['teacher']['imageMap']['pcUrlMap']['large']}" th:alt="${courseOpen['teacher']['teacherName']}" height="20" width="20">
                                                </a>
                                            </aside>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div th:if="${#lists.size(courseOpenList)>4}" class="item">
                    <div class="course-list__wrap i-live-course__wrap">
                        <div class="row">
                            <div class="col-md-4 col-lg-3" th:each="courseOpen, index: ${courseOpenList}" th:if="${index.index>=4 && index.index<=7}">
                                <div class="thumbnail pr">
                                    <section th:if="${courseOpen['playStatus']==1}" class="i-live-c-timer__wrap text-center">
                                        <div class="hLh30 pr">
                                            <span class="i-live-badge label label-primary"><em>直播中</em></span>
                                            <span class="fs20 c-primary" th:text="${#strings.substring(courseOpen['openTime'],10,16)} + ' — ' + ${#strings.substring(courseOpen['endTime'],10,16)}"></span>
                                        </div>
                                        <div>
                                            <span class="c-999" th:text="${#strings.substring(courseOpen['openTime'],5,7)} + '月' + ${#strings.substring(courseOpen['endTime'],7,10)} + '日'"></span>
                                        </div>
                                        <h6><span class="fs16 c-primary"><i class="fa fa-circle"></i></span></h6>
                                    </section>
                                    <section th:if="${courseOpen['playStatus']!=1}" class="i-live-c-timer__wrap text-center">
                                        <div class="hLh30"><span class="fs20 c-666" th:text="${#strings.substring(courseOpen['openTime'],10,16)} + ' — ' + ${#strings.substring(courseOpen['endTime'],10,16)}"></span></div>
                                        <div th:text="${#strings.substring(courseOpen['openTime'],5,7)} + '月' + ${#strings.substring(courseOpen['endTime'],7,10)} + '日'"></div>
                                        <h6><span class="fs16 c-ccc"><i class="fa fa-circle"></i></span></h6>
                                    </section>
                                    <section class="pr" th:attr="data-open=${courseOpen['id']},data-status=${courseOpen['playStatus']}">
                                        <aside th:if="${courseOpen['playStatus']==1}" class="cm-kc-num"><span class="fs12 c-warning"><i class="fa fa-circle"></i> 直播中</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==2} and !${courseOpen['reservation']}" class="cm-kc-num"><span class="fs12 c-primary"><i class="fa fa-circle"></i> 可预约</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==2} and ${courseOpen['reservation']}" class="cm-kc-num"><span class="fs12 c-primary"><i class="fa fa-circle"></i> 已预约</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==3 && courseOpen['replay']!=2}" class="cm-kc-num"><span class="fs12 c-fff"><i class="fa fa-circle"></i> 已结束</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==3 && courseOpen['replay']==2}" class="cm-kc-num"><span class="fs12 c-info"><i class="fa fa-circle"></i> 有回放</span></aside>
                                        <a href="javascript:void(0)"><img class="lazy" width="100%" th:attr="data-original=${courseOpen['imageMap']['pcUrlMap']['large']}"></a>
                                    </section>
                                    <div class="caption bg-fb">
                                        <section class="cm-desc-txt__twoLine">
                                            <a href="javascript:void(0)" class="fs14 c-333" th:text="${courseOpen['courseName']}"></a>
                                        </section>
                                        <section class="mt10 mb5 clearfix">
                                            <aside class="pull-right">
                                                <span class="ml5 fs12 c-999">
                                                    学习:
                                                    <span th:text="${courseOpen['bespeakNum']}"></span>
                                                </span>
                                            </aside>
                                            <aside class="pull-left hLh20 txtOf i-c-small-teacher__wrap" th:if="${courseOpen['teacher']}!=null">
                                                <a th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${courseOpen['teacher']['id']})}"  data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${courseOpen['teacher']['teacherName']}"  class="mr5">
                                                    <img class="img-circle lazy-user" th:attr="data-original=${courseOpen['teacher']['imageMap']['pcUrlMap']['large']}" th:alt="${courseOpen['teacher']['teacherName']}" height="20" width="20">
                                                </a>
                                            </aside>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item" th:if="${#lists.size(courseOpenList)>8}">
                    <div class="course-list__wrap i-live-course__wrap">
                        <div class="row">
                            <div class="col-md-4 col-lg-3" th:each="courseOpen, index: ${courseOpenList}" th:if="${index.index>=8}">
                                <div class="thumbnail pr">
                                    <section th:if="${courseOpen['playStatus']==1}" class="i-live-c-timer__wrap text-center">
                                        <div class="hLh30 pr">
                                            <span class="i-live-badge label label-primary"><em>直播中</em></span>
                                            <span class="fs20 c-primary" th:text="${#strings.substring(courseOpen['openTime'],10,16)} + ' — ' + ${#strings.substring(courseOpen['endTime'],10,16)}"></span>
                                        </div>
                                        <div>
                                            <span class="c-999" th:text="${#strings.substring(courseOpen['openTime'],5,7)} + '月' + ${#strings.substring(courseOpen['endTime'],7,10)} + '日'"></span>
                                        </div>
                                        <h6><span class="fs16 c-primary"><i class="fa fa-circle"></i></span></h6>
                                    </section>
                                    <section th:if="${courseOpen['playStatus']!=1}" class="i-live-c-timer__wrap text-center">
                                        <div class="hLh30"><span class="fs20 c-666" th:text="${#strings.substring(courseOpen['openTime'],10,16)} + ' — ' + ${#strings.substring(courseOpen['endTime'],10,16)}"></span></div>
                                        <div th:text="${#strings.substring(courseOpen['openTime'],5,7)} + '月' + ${#strings.substring(courseOpen['endTime'],7,10)} + '日'"></div>
                                        <h6><span class="fs16 c-ccc"><i class="fa fa-circle"></i></span></h6>
                                    </section>
                                    <section class="pr" th:attr="data-open=${courseOpen['id']},data-status=${courseOpen['playStatus']}">
                                        <aside th:if="${courseOpen['playStatus']==1}" class="cm-kc-num"><span class="fs12 c-warning"><i class="fa fa-circle"></i> 直播中</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==2} and !${courseOpen['reservation']}" class="cm-kc-num"><span class="fs12 c-primary"><i class="fa fa-circle"></i> 可预约</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==2} and ${courseOpen['reservation']}" class="cm-kc-num"><span class="fs12 c-primary"><i class="fa fa-circle"></i> 已预约</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==3 && courseOpen['replay']!=2}" class="cm-kc-num"><span class="fs12 c-fff"><i class="fa fa-circle"></i> 已结束</span></aside>
                                        <aside th:if="${courseOpen['playStatus']==3 && courseOpen['replay']==2}" class="cm-kc-num"><span class="fs12 c-info"><i class="fa fa-circle"></i> 有回放</span></aside>
                                        <a href="javascript:void(0)"><img class="lazy" width="100%" th:attr="data-original=${courseOpen['imageMap']['pcUrlMap']['large']}"></a>
                                    </section>
                                    <div class="caption bg-fb">
                                        <section class="cm-desc-txt__twoLine">
                                            <a href="javascript:void(0)" class="fs14 c-333" th:text="${courseOpen['courseName']}"></a>
                                        </section>
                                        <section class="mt10 mb5 clearfix">
                                            <aside class="pull-right">
                                            <span class="ml5 fs12 c-999">
                                                学习:
                                                <span th:text="${courseOpen['bespeakNum']}"></span>
                                            </span>
                                            </aside>
                                            <aside class="pull-left hLh20 txtOf i-c-small-teacher__wrap" th:if="${courseOpen['teacher']}!=null">
                                                <a th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${courseOpen['teacher']['id']})}"  data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${courseOpen['teacher']['teacherName']}"  class="mr5">
                                                    <img class="img-circle lazy-user" th:attr="data-original=${courseOpen['teacher']['imageMap']['pcUrlMap']['large']}" th:alt="${courseOpen['teacher']['teacherName']}" height="20" width="20">
                                                </a>
                                            </aside>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel2" data-slide="prev">
            <span class="icon-prev"><i class="fa fa-chevron-left"></i></span>
        </a>
        <a class="right carousel-control" href="#carousel2" data-slide="next">
            <span class="icon-next"><i class="fa fa-chevron-right"></i></span>
        </a>
        <script>
            $('[data-toggle=tooltip]').tooltip();
        </script>
    </div>
</html>